<template>
  <div class="app-page">
    <div class="left">
      <div class="scene">
        <iframe src="/scene/rabbit/index.html" frameborder="0"></iframe>
      </div>
      <div class="operate"></div>
    </div>
    <div class="right">
      <div class="info">
        <div class="main"></div>
      </div>
      <div class="operate">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="蓝牙串口" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="蓝牙手柄" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="PS2手柄" name="third">角色管理</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    }
  }
}
</script>

<style lang="scss">
$color: #44aec4;
$border: 1px solid $color;
.app-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  .left {
    flex: 1 1 auto;
    height: 100%;
    border: $border;
    display: flex;
    flex-direction: column;
    .scene {
      flex: 1 1 auto;
      width: 100%;
      iframe {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 1px;
      }
    }
    .operate {
      width: 100%;
      height: 40px;
      border-top: $border;
    }
  }
  .right {
    width: 400px;
    flex-shrink: 0;
    height: 100%;
    border: $border;
    border-left: none;
    display: flex;
    flex-direction: column;
    .info {
      flex: 1 1 auto;
      border-bottom: $border;
      padding: 10px;
      background: #f2f2f2;
      flex-shrink: 0;
      .main {
        width: 100%;
        height: 100%;
        background: #fff;
      }
    }
    .operate {
      flex: 1 1 auto;
      flex-shrink: 0;
      .el-tabs {
        width: 100%;
        height: 100%;
        display: flex !important;
        .el-tabs__header {
          margin-bottom: 0 !important;
        }
        flex-direction: column !important;
        .el-tabs__content {
          flex: 1 1 auto !important;
          padding: 10px;
        }
      }
      .el-tabs--card>.el-tabs__header {
        border-bottom: 1px solid $color !important;
      }
      .el-tabs--card>.el-tabs__header .el-tabs__item {
        border-left: 1px solid $color !important;
        &:first-child {
          border-left: none !important;
        }
        &:hover {
          color: #303133 !important;
        }
      }
      .el-tabs--card>.el-tabs__header .el-tabs__nav {
        border-bottom: 1px solid $color !important;
        border-right: 1px solid #44aec4 !important;
        border-radius: 0 !important;
      }
      .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
        background: #2c8699;
        color: #fff;
        &:hover {
          color: #fff !important;
        }
      }
    }
  }
}
</style>